<!--
 * @Author: Bennty
 * @Date: 2024-12-26 16:17:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-12-27 13:23:12
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="打印销售单" @close="handleClose">
        <div id="print-area" ref="printArea">
            <div class="company-info">
                <div class="company-name">
                    <h1>临沂三江纸制品有限公司</h1>
                    <div class="company-address">
                        <span>地址：临沂市兰山区临西十二路大山路北200米路东</span>
                        <span>电话/手机：15275587977</span>
                    </div>
                </div>
                <div class="saler-order">
                    <h1>【销售单】</h1>
                </div>
            </div>
            <el-form class="customer-info-form">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户名称：">芙莉法甜</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话：">芙莉法甜</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系人："></el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="客户地址：">芙莉法甜</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发货方式：">芙莉法甜</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发货日期："></el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <table class="order-table">
                <tr>
                    <td>序号</td>
                    <td colspan="2">品名及规格</td>
                    <td>单位</td>
                    <td>数量(箱)</td>
                    <td>单价(元/箱)</td>
                    <td>金额</td>
                    <td colspan="2">备注</td>
                </tr>
                <tr v-for="(item,index) in productList" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td colspan="2">{{ item.name }}</td>
                    <td >{{ item.unite }}</td>
                    <td >{{ item.number }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ Number(item.price)*Number(item.number) }}</td>
                    <td colspan="2">{{ item.remark }}</td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: left;">
                        合计金额(人民币大写):
                    </td>
                    <td colspan="4" style="text-align: left;">
                        (小写): 
                    </td>
                </tr>
                <tr>
                    <td colspan="6" style="text-align: left;">
                        备注：
                    </td>
                    <td colspan="4" style="text-align: left;">
                        付款方式：
                    </td>
                </tr>
                <tr>
                    <td colspan="10" style="text-align: left;">
                        <div>1.货到由客户当场验收；收货后对产品质量有异议，请在收货后七日内提出，超过七日视同合格</div>
                        <div>1.货到由客户当场验收；收货后对产品质量有异议，请在收货后七日内提出，超过七日视同合格</div>
                    </td>
                </tr>
            </table>
            <el-row style="margin-top: 10px;width: 90%">
                <el-col :span="4">制单：</el-col>
                <el-col :span="4">复核人：</el-col>
                <el-col :span="4">审核人：</el-col>
                <el-col :span="4">送货人：</el-col>
                <el-col :span="4">客户签收：</el-col>
            </el-row>
            <div class="tips">
                <span>1</span>
                <span class="tip-text">白存根</span>
                <span>2</span>
                <span class="tip-text">红客户</span>
                <span>3</span>
                <span class="tip-text">黄仓库</span>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary"  >打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
    visible: boolean,
}>();
const emits = defineEmits(['close']);

const productList = ref<any[]>([
    {
        id: 1,
        name: '麦贝拉A款产品',
        unite: '个',
        number: 100,
        price: 10,
        remark: 'remark remark'
    },
    {
        id: 2,
        name: '麦贝拉B款产品',
        unite: '只',
        number: 150,
        price: 8,
        remark: 'ddd'
    },
    {
        id: 3,
        name: '麦贝拉C款产品',
        unite: '只',
        number: 200,
        price: 7.5,
        remark: 'ddd'
    },
]);
const printArea = ref<HTMLElement | null>(null);

const onClickPrint = async () => {
    if(printArea.value){
        // 保存当前页面的原始内容
        const originalContent = document.body.innerHTML
        // 获取要打印的内容
        const printContent = printArea.value.innerHTML

        // 替换页面内容为要打印的内容
        document.body.innerHTML = printContent

        // 调用打印
        window.print()

        // 打印后恢复原始内容
        document.body.innerHTML = originalContent
        
        location.reload() // 可选：刷新页面以恢复事件监听
    };
};

const handleClose = () => {
    emits('close');
};
</script>

<style lang="scss" scoped>
.company-info{
    display: flex;
    justify-content: center;
    width: 100%;
    .company-name{
        margin-right: 25px;
        h1{
            font-size: 32px;
            margin-bottom: 10px;
            font-weight: bolder;
        }
    }
    .company-address{
        span{
            font-size: 14px;
            display: block;
        }
    }
    .saler-order{
        h1{
            font-size: 32px;
            font-weight: bolder;
        }
    }
}
.customer-info-form{
    width: 90%;
    .el-form-item{
        margin-bottom: 0px;
    }
}
#print-area{
    display: flex;
    justify-content: center;
    flex-flow:wrap;
    position: relative;
    .tips{
        position: absolute;
        right: 10px;
        top: 43%;
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
            writing-mode: vertical-rl;
            margin-top:5px;
        }
        .tip-text{
            margin-bottom: 10px;
        }
    }
}
.order-table{
    border-spacing: 0;
    border: 1px solid black;
    width: 90%;
    font-size: 20px;
    tr{
        border: 1px solid black;
    }
    td{
        border: 1px solid black;
        text-align: center;
    }
    .img-col{
        text-align: center;
        padding-top: 12px;
        .product-image{
            width: 70%;
            height: 50px;
        }
        .order-number{
            color: blue
        }
    }
    .not-center{
        text-align: left;
    }
    .code-image{
        height: 100px
    }
    .inventory-alert{
        color: red;
    }
    .field-title{
        font-weight: bold;
    }
    .auxiliary-name{
        display: flex;
        justify-content: space-between;
        span{
            display: block
        }
    }
    .inputing-col{
        display: flex;
        justify-content: center;
        align-items: center;
        .inputing-col{
            display: flex;
            align-items: center;
        }
    }
    .apply-input{
        width: 110px;
        height: 40px;
    }
    .apply-number{
        display: block;
        width: 110px;
        height: 40px;
        cursor: pointer;
    }
}
</style>